<template>
  <div>
    <input type="text" v-model="mytext" />
    <ul>
      <li v-for="(data, index) in computedList" :key="index">{{ data }}</li>
    </ul>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'

export default {
  setup () {
    const mytext = ref('')
    const list = ref([])
    onMounted(() => {
      fetch('/test.json').then(res => res.json()).then(res => {
        console.log(res)
        list.value = res.list
      })
    })

    const computedList = computed(() => {
      const newlist = list.value.filter(item => item.includes(mytext.value))
      return newlist
    })

    // const handleChange = () => {
    //   mytext.value = 'json'
    // }
    // 注意mytext.value
    return {
      mytext,
      list,
      computedList
    }
  }
}
</script>
